<%--&lt;%&ndash;--%>
<%--  Created by IntelliJ IDEA.--%>
<%--  User: 付志玲--%>
<%--  Date: 2025/6/3--%>
<%--  Time: 下午9:40--%>
<%--  To change this template use File | Settings | File Templates.--%>
<%--&ndash;%&gt;--%>
<%--&lt;%&ndash;<%@ page contentType="text/html;charset=UTF-8" language="java" %>&ndash;%&gt;--%>
<%--&lt;%&ndash;<html>&ndash;%&gt;--%>
<%--&lt;%&ndash;<head>&ndash;%&gt;--%>
<%--&lt;%&ndash;    <title>Title</title>&ndash;%&gt;--%>
<%--&lt;%&ndash;</head>&ndash;%&gt;--%>
<%--&lt;%&ndash;<body>&ndash;%&gt;--%>
<%--&lt;%&ndash;你好&ndash;%&gt;--%>
<%--&lt;%&ndash;</body>&ndash;%&gt;--%>
<%--&lt;%&ndash;</html>&ndash;%&gt;--%>

<%--<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>--%>
<%--<%@ page import="java.sql.*" %>--%>
<%--<%@ page import="org.example.DBConnection" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <title>学生信息管理</title>--%>
<%--    <style>--%>
<%--        table { border-collapse: collapse; width: 100%; }--%>
<%--        th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; }--%>
<%--        th { background-color: #f2f2f2; }--%>
<%--        tr:hover { background-color: #f5f5f5; }--%>
<%--        .btn { padding: 6px 12px; text-decoration: none; border-radius: 4px; }--%>
<%--        .btn-add { background-color: #4CAF50; color: white; }--%>
<%--        .btn-edit { background-color: #008CBA; color: white; }--%>
<%--        .btn-delete { background-color: #f44336; color: white; }--%>
<%--    </style>--%>
<%--</head>--%>
<%--<body>--%>
<%--<h1>学生信息管理</h1>--%>
<%--<a href="student_add.jsp" class="btn btn-add">添加学生</a>--%>

<%--<table>--%>
<%--    <tr>--%>
<%--        <th>学号</th>--%>
<%--        <th>姓名</th>--%>
<%--        <th>性别</th>--%>
<%--        <th>专业</th>--%>
<%--        <th>年级</th>--%>
<%--        <th>创建时间</th>--%>
<%--        <th>操作</th>--%>
<%--    </tr>--%>

<%--    <%--%>
<%--        Connection conn = null;--%>
<%--        PreparedStatement pstmt = null;--%>
<%--        ResultSet rs = null;--%>

<%--        try {--%>
<%--            conn = DBConnection.getConnection();--%>
<%--            String sql = "SELECT * FROM student ORDER BY student_id DESC";--%>
<%--            pstmt = conn.prepareStatement(sql);--%>
<%--            rs = pstmt.executeQuery();--%>

<%--            while (rs.next()) {--%>
<%--    %>--%>
<%--    <tr>--%>
<%--        <td><%= rs.getString("student_id") %></td>--%>
<%--        <td><%= rs.getString("name") %></td>--%>
<%--        <td><%= rs.getString("gender") %></td>--%>
<%--        <td><%= rs.getString("major") %></td>--%>
<%--        <td><%= rs.getString("grade") %></td>--%>
<%--        <td><%= rs.getString("created_at") %></td>--%>
<%--        <td>--%>
<%--            <a href="student_edit.jsp?id=<%= rs.getInt("id") %>" class="btn btn-edit">编辑</a>--%>
<%--            <a href="student_delete.jsp?id=<%= rs.getInt("id") %>" class="btn btn-delete"--%>
<%--               onclick="return confirm('确定要删除吗?')">删除</a>--%>
<%--        </td>--%>
<%--    </tr>--%>
<%--    <%--%>
<%--            }--%>
<%--        } catch (SQLException e) {--%>
<%--            e.printStackTrace();--%>
<%--        } finally {--%>
<%--            DBConnection.close(conn, pstmt, rs);--%>
<%--        }--%>
<%--    %>--%>
<%--</table>--%>
<%--</body>--%>
<%--</html>--%>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ page import="org.example.DBConnection" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0A2463',
                        accent: '#3E92CC',
                        neutral: '#F5F7FA',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors;
            }
            .btn-secondary {
                @apply bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors;
            }
            .btn-danger {
                @apply bg-danger text-white px-4 py-2 rounded-lg hover:bg-danger/90 transition-colors;
            }
        }
    </style>

    <style>
        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }

        /* 表格样式 */
        .table-responsive {
            overflow-x: auto;
        }

        /* 表单验证样式 */
        .error {
            color: #F53F3F;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-primary shadow-md fixed top-0 left-0 right-0 z-30">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <div class="flex items-center space-x-2">
                <i class="fa fa-graduation-cap text-white text-2xl"></i>
                <h1 class="text-xl font-bold text-white">学生信息管理系统</h1>
            </div>
        </div>

        <div class="flex items-center space-x-4">
            <div class="flex items-center space-x-2 cursor-pointer group">
                <i class="fa fa-user-circle-o text-white text-xl"></i>
                <span class="hidden sm:block font-medium text-white">管理员</span>
            </div>
        </div>
    </div>
</header>

<div class="flex pt-16 min-h-screen">
    <!-- 主内容区域 -->
    <main class="flex-1 p-4 sm:p-6">
        <div class="fade-in">
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">学生信息管理</h2>
                <p class="text-gray-500 mt-1">管理系统中的所有学生信息</p>
            </div>

            <!-- 操作按钮 -->
            <div class="flex flex-wrap justify-between items-center mb-6 gap-4">
                <div>
                    <button id="add-student-btn" class="btn-primary flex items-center">
                        <i class="fa fa-plus mr-2"></i> 添加学生
                    </button>
                </div>

                <div class="flex items-center space-x-2">
                    <div class="relative">
                        <input type="text" id="search-input" placeholder="搜索学生..."
                               class="pl-10 pr-4 py-2 rounded-lg bg-white border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 w-full sm:w-64 transition-all">
                        <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    </div>
                    <button id="search-btn" class="btn-primary">
                        <i class="fa fa-search mr-2"></i> 搜索
                    </button>
                </div>
            </div>

            <!-- 学生列表 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                <div class="table-responsive">
                    <table class="min-w-full">
                        <thead>
                        <tr class="bg-gray-50 border-b border-gray-200">
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <input type="checkbox" id="select-all" class="rounded text-primary focus:ring-primary">
                            </th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                学号
                            </th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                姓名
                            </th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                性别
                            </th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                专业
                            </th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                籍贯
                            </th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                原所在学校
                            </th>
<%--                            <th class="py-3 px-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">--%>
<%--                                操作时间--%>
<%--                            </th>--%>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                        <%
                            Connection conn = null;
                            PreparedStatement pstmt = null;
                            ResultSet rs = null;
                            int currentpage = 1;
                            int pageSize = 10;
                            int totalCount = 0;
                            int totalPages = 0;

                            try {
                                // 获取当前页码
                                String pageParam = request.getParameter("page");
                                if (pageParam != null && !pageParam.isEmpty()) {
                                    currentpage = Integer.parseInt(pageParam);
                                }

                                conn = DBConnection.getConnection();

                                // 获取总记录数
                                String countSql = "SELECT COUNT(*) as total FROM student";
                                pstmt = conn.prepareStatement(countSql);
                                rs = pstmt.executeQuery();

                                if (rs.next()) {
                                    totalCount = rs.getInt("total");
                                }
                                rs.close();
                                pstmt.close();

                                // 计算总页数
                                totalPages = (int) Math.ceil((double) totalCount / pageSize);

                                // 查询当前页数据
                                String sql = "SELECT * FROM student ORDER BY student_id DESC LIMIT ? OFFSET ?";
                                pstmt = conn.prepareStatement(sql);
                                pstmt.setInt(1, pageSize);
                                pstmt.setInt(2, (currentpage - 1) * pageSize);
                                rs = pstmt.executeQuery();

                                while (rs.next()) {
                                    String studentId = rs.getString("student_id");
                                    String name = rs.getString("name");
                                    String age = rs.getString("age");
                                    String department = rs.getString("department");
                                    String hometown = rs.getString("hometown");
                                    String previous_school = rs.getString("previous_school");
                        %>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-4">
                                <input type="checkbox" class="student-checkbox rounded text-primary focus:ring-primary"
                                       data-id="<%= studentId %>">
                            </td>
                            <td class="py-3 px-4 text-sm font-medium"><%= studentId %></td>
                            <td class="py-3 px-4 text-sm"><%= name %></td>
                            <td class="py-3 px-4 text-sm"><%= age %></td>
                            <td class="py-3 px-4 text-sm"><%= department %></td>
                            <td class="py-3 px-4 text-sm"><%= hometown %></td>
                            <td class="py-3 px-4 text-sm text-gray-500"><%= previous_school %></td>
                            <td class="py-3 px-4 text-right">
                                <button class="edit-btn text-primary hover:text-primary/80 mr-3"
                                        data-id="<%= studentId %>">
                                    <i class="fa fa-edit mr-1"></i> 编辑
                                </button>
                                <button class="delete-btn text-danger hover:text-danger/80"
                                        data-id="<%= studentId %>" data-name="<%= name %>">
                                    <i class="fa fa-trash mr-1"></i> 删除
                                </button>
                            </td>
                        </tr>
                        <%
                                }
                            } catch (SQLException e) {
                                e.printStackTrace();
                            } finally {
                                DBConnection.close(conn, pstmt, rs);
                            }
                        %>
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="px-4 py-3 flex items-center justify-between border-t border-gray-200">
                    <div class="flex-1 flex justify-between sm:hidden">
                        <button class="btn-secondary">上一页</button>
                        <button class="btn-secondary">下一页</button>
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                显示第 <span class="font-medium"><%= (currentpage - 1) * pageSize + 1 %></span> 至
                                <span class="font-medium"><%= Math.min(currentpage * pageSize, totalCount) %></span> 条，
                                共 <span class="font-medium"><%= totalCount %></span> 条记录
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                                <a href="?page=<%= Math.max(1, currentpage - 1) %>" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <span class="sr-only">上一页</span>
                                    <i class="fa fa-chevron-left"></i>
                                </a>

                                <%
                                    int startPage = Math.max(1, currentpage - 2);
                                    int endPage = Math.min(totalPages, startPage + 4);

                                    if (endPage - startPage < 4 && startPage > 1) {
                                        startPage = Math.max(1, endPage - 4);
                                    }

                                    for (int i = startPage; i <= endPage; i++) {
                                %>
                                <a href="?page=<%= i %>" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium
                                        <%= i == currentpage ? "text-primary bg-primary/5" : "text-gray-700 hover:bg-gray-50" %>">
                                    <%= i %>
                                </a>
                                <%
                                    }
                                %>

                                <a href="?page=<%= Math.min(totalPages, currentpage + 1) %>" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <span class="sr-only">下一页</span>
                                    <i class="fa fa-chevron-right"></i>
                                </a>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- 添加/编辑学生模态框 -->
<div id="student-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
    <div class="absolute inset-0 bg-black bg-opacity-50 transition-opacity"></div>
    <div class="relative bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden transform transition-all">
        <div class="bg-primary text-white px-6 py-4 flex justify-between items-center">
            <h3 id="modal-title" class="text-lg font-medium">添加学生</h3>
            <button id="close-modal" class="text-white hover:text-gray-200">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-6">
            <form id="student-form">
                <input type="hidden" id="student-id" name="student_id">

                <div class="mb-4">
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                    <input type="text" id="name" name="name" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30">
                    <p id="name-error" class="error hidden"></p>
                </div>

<%--                <div class="mb-4">--%>
<%--                    <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">性别</label>--%>
<%--                    <div class="flex space-x-4">--%>
<%--                        <label class="inline-flex items-center">--%>
<%--                            <input type="radio" name="gender" value="男" checked--%>
<%--                                   class="text-primary focus:ring-primary">--%>
<%--                            <span class="ml-2">男</span>--%>
<%--                        </label>--%>
<%--                        <label class="inline-flex items-center">--%>
<%--                            <input type="radio" name="gender" value="女"--%>
<%--                                   class="text-primary focus:ring-primary">--%>
<%--                            <span class="ml-2">女</span>--%>
<%--                        </label>--%>
<%--                    </div>--%>
<%--                </div>--%>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">性别</label>
                    <div class="flex space-x-4">
                        <label class="inline-flex items-center">
                            <input type="radio" name="gender" value="男" checked
                                   class="text-primary focus:ring-primary">
                            <span class="ml-2">男</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="radio" name="gender" value="女"
                                   class="text-primary focus:ring-primary">
                            <span class="ml-2">女</span>
                        </label>
                    </div>
                </div>

                <div class="mb-4">
                    <label for="major" class="block text-sm font-medium text-gray-700 mb-1">专业</label>
                    <input type="text" id="major" name="major" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30">
                    <p id="major-error" class="error hidden"></p>
                </div>

                <div class="mb-6">
                    <label for="grade" class="block text-sm font-medium text-gray-700 mb-1">年级</label>
                    <select id="grade" name="grade" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30">
                        <%
                            for (int year = 2018; year <= 2025; year++) {
                        %>
                        <option value="<%= year %>"><%= year %></option>
                        <%
                            }
                        %>
                    </select>
                    <p id="grade-error" class="error hidden"></p>
                </div>

                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-btn" class="btn-secondary">取消</button>
                    <button type="submit" id="save-btn" class="btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div id="delete-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
    <div class="absolute inset-0 bg-black bg-opacity-50 transition-opacity"></div>
    <div class="relative bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden transform transition-all">
        <div class="p-6">
            <div class="text-center mb-4">
                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 mb-4">
                    <i class="fa fa-trash text-red-500 text-xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">确认删除</h3>
                <p id="delete-message" class="text-sm text-gray-500">
                    你确定要删除学生 "<span id="delete-student-name"></span>" 吗？此操作不可撤销。
                </p>
            </div>
            <div class="flex justify-center space-x-3">
                <button id="cancel-delete-btn" class="btn-secondary">取消</button>
                <button id="confirm-delete-btn" class="btn-danger">确认删除</button>
            </div>
        </div>
    </div>
</div>

<!-- 操作结果提示 -->
<div id="toast" class="fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transform transition-all duration-300 opacity-0 translate-y-[-20px] max-w-sm">
    <div class="flex items-center">
        <i id="toast-icon" class="mr-3 text-xl"></i>
        <div>
            <p id="toast-message" class="text-sm font-medium"></p>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取DOM元素
        const studentModal = document.getElementById('student-modal');
        const deleteModal = document.getElementById('delete-modal');
        const toast = document.getElementById('toast');
        const studentForm = document.getElementById('student-form');
        const addStudentBtn = document.getElementById('add-student-btn');
        const closeModalBtn = document.getElementById('close-modal');
        const cancelBtn = document.getElementById('cancel-btn');
        const saveBtn = document.getElementById('save-btn');
        const cancelDeleteBtn = document.getElementById('cancel-delete-btn');
        const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
        const deleteStudentName = document.getElementById('delete-student-name');
        const searchBtn = document.getElementById('search-btn');
        const searchInput = document.getElementById('search-input');
        const selectAllCheckbox = document.getElementById('select-all');

        let currentStudentId = null;
        let isAdding = true;

        // 显示模态框
        function showModal() {
            studentModal.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        }

        // 隐藏模态框
        function hideModal() {
            studentModal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
            studentForm.reset();
            currentStudentId = null;
            isAdding = true;
            document.getElementById('modal-title').textContent = '添加学生';
            clearErrors();
        }

        // 显示删除确认模态框
        function showDeleteModal(studentId, name) {
            deleteModal.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
            deleteStudentName.textContent = name;
            confirmDeleteBtn.dataset.id = studentId;
        }

        // 隐藏删除确认模态框
        function hideDeleteModal() {
            deleteModal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        }

        // 显示提示消息
        function showToast(message, type) {
            const toastIcon = document.getElementById('toast-icon');
            const toastMessage = document.getElementById('toast-message');

            // 设置提示类型样式
            if (type === 'success') {
                toast.classList.add('bg-green-50', 'border-l-4', 'border-green-500', 'text-green-700');
                toast.classList.remove('bg-red-50', 'border-l-4', 'border-red-500', 'text-red-700');
                toastIcon.classList.add('fa-check-circle', 'text-green-500');
                toastIcon.classList.remove('fa-exclamation-circle', 'text-red-500');
            } else {
                toast.classList.add('bg-red-50', 'border-l-4', 'border-red-500', 'text-red-700');
                toast.classList.remove('bg-green-50', 'border-l-4', 'border-green-500', 'text-green-700');
                toastIcon.classList.add('fa-exclamation-circle', 'text-red-500');
                toastIcon.classList.remove('fa-check-circle', 'text-green-500');
            }

            toastMessage.textContent = message;
            toast.classList.remove('opacity-0', 'translate-y-[-20px]');

            // 3秒后自动隐藏
            setTimeout(() => {
                toast.classList.add('opacity-0', 'translate-y-[-20px]');
            }, 3000);
        }

        // 清除表单错误
        function clearErrors() {
            document.querySelectorAll('.error').forEach(el => {
                el.classList.add('hidden');
                el.textContent = '';
            });
        }

        // 验证表单
        function validateForm() {
            let isValid = true;
            clearErrors();

            const name = document.getElementById('name').value.trim();
            const major = document.getElementById('major').value.trim();

            if (name === '') {
                document.getElementById('name-error').textContent = '姓名不能为空';
                document.getElementById('name-error').classList.remove('hidden');
                isValid = false;
            }

            if (major === '') {
                document.getElementById('major-error').textContent = '专业不能为空';
                document.getElementById('major-error').classList.remove('hidden');
                isValid = false;
            }

            return isValid;
        }

        // 获取学生信息
        function getStudent(studentId) {
            // 这里应该通过AJAX请求获取学生信息
            // 简化示例，实际项目中应该替换为真实的API调用

            // 模拟加载状态
            saveBtn.disabled = true;
            saveBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...';

            setTimeout(() => {
                // 模拟API返回
                const xhr = new XMLHttpRequest();
                xhr.open('GET', `get_student.jsp?id=${studentId}`, true);
                xhr.setRequestHeader('Content-Type', 'application/json');
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        const student = JSON.parse(xhr.responseText);
                        if (student) {
                            document.getElementById('student-id').value = student.student_id;
                            document.getElementById('name').value = student.name;

                            // 设置性别
                            document.querySelectorAll('input[name="gender"]').forEach(radio => {
                                if (radio.value === student.gender) {
                                    radio.checked = true;
                                }
                            });

                            document.getElementById('major').value = student.major;
                            document.getElementById('grade').value = student.grade;

                            document.getElementById('modal-title').textContent = '编辑学生';
                            isAdding = false;
                            showModal();
                        } else {
                            showToast('未找到该学生信息', 'error');
                        }
                    }
                };
                xhr.send();

                // 恢复按钮状态
                saveBtn.disabled = false;
                saveBtn.innerHTML = '保存';
            }, 500);
        }

        // 保存学生信息
        function saveStudent() {
            if (!validateForm()) {
                return;
            }

            const formData = new FormData(studentForm);
            const data = {};
            formData.forEach((value, key) => {
                data[key] = value;
            });

            // 模拟保存状态
            saveBtn.disabled = true;
            saveBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 保存中...';

            setTimeout(() => {
                // 模拟API请求
                const xhr = new XMLHttpRequest();
                xhr.open(isAdding ? 'POST' : 'PUT', isAdding ? 'add_student.jsp' : 'update_student.jsp', true);
                xhr.setRequestHeader('Content-Type', 'application/json');
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            showToast(isAdding ? '学生添加成功' : '学生信息更新成功', 'success');
                            hideModal();
                            // 刷新页面
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            showToast(isAdding ? '学生添加失败' : '学生信息更新失败', 'error');
                        }
                        // 恢复按钮状态
                        saveBtn.disabled = false;
                        saveBtn.innerHTML = '保存';
                    }
                };
                xhr.send(JSON.stringify(data));
            }, 800);
        }

        // 删除学生
        function deleteStudent(studentId) {
            // 模拟删除状态
            confirmDeleteBtn.disabled = true;
            confirmDeleteBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 删除中...';

            setTimeout(() => {
                // 模拟API请求
                const xhr = new XMLHttpRequest();
                xhr.open('DELETE', `delete_student.jsp?id=${studentId}`, true);
                xhr.setRequestHeader('Content-Type', 'application/json');
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            showToast('学生删除成功', 'success');
                            hideDeleteModal();
                            // 刷新页面
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            showToast('学生删除失败', 'error');
                        }
                        // 恢复按钮状态
                        confirmDeleteBtn.disabled = false;
                        confirmDeleteBtn.innerHTML = '确认删除';
                    }
                };
                xhr.send();
            }, 800);
        }

        // 搜索学生
        function searchStudents() {
            const keyword = searchInput.value.trim();
            if (keyword) {
                window.location.href = `student_list.jsp?keyword=${encodeURIComponent(keyword)}`;
            } else {
                window.location.href = 'student_list.jsp';
            }
        }

        // 事件监听
        addStudentBtn.addEventListener('click', showModal);
        closeModalBtn.addEventListener('click', hideModal);
        cancelBtn.addEventListener('click', hideModal);
        studentForm.addEventListener('submit', function(e) {
            e.preventDefault();
            saveStudent();
        });

        cancelDeleteBtn.addEventListener('click', hideDeleteModal);
        confirmDeleteBtn.addEventListener('click', function() {
            const studentId = this.dataset.id;
            deleteStudent(studentId);
        });

        searchBtn.addEventListener('click', searchStudents);
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchStudents();
            }
        });

        // 编辑按钮点击事件
        document.querySelectorAll('.edit-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const studentId = this.dataset.id;
                currentStudentId = studentId;
                getStudent(studentId);
            });
        });

        // 删除按钮点击事件
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const studentId = this.dataset.id;
                const name = this.dataset.name;
                showDeleteModal(studentId, name);
            });
        });

        // 全选复选框
        selectAllCheckbox.addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('.student-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });
    });
</script>
</body>
</html>
